<!doctype html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8" />
	<title>Vue2.0</title>
	<link rel="stylesheet" href="css/bootstrap.css" />
	<script src="js/vue.js"></script>
	<script src="js/jquery-1.11.2.js"></script>
	<style>
     body{
	background: #eee;
     }
     .computed{
	color:red;
     }
   </style>
</head>
<body> 
	 <div class="container" >
	 		<div id="app">
	        
	                 
	     
	                 <my-component v-bind:props ="message" ></my-component>
	                  <my-component v-bind:props ="message2" ></my-component>
	                  <my-component v-bind:props ="message3" ></my-component>
	                       
	                 
	 		 </div>
      </div>
</body>
</html>

<script>
 new Vue({
  el: '#app',
  data: {
	  message:  [
	      {body:"go to the school",flag:true},
	      {body:"go to the movie",flag:false},
	      {body:"go to the shop",flag:true}
	    ],
	    message2:  [
	      {body:"go to the school",flag:true},
	      {body:"go to the shop",flag:true}
	     	    ],
	   message3:  [
	      {body:"go to the school",flag:true},
	      {body:"go to the movie",flag:false},
	      {body:"go to the shop",flag:true},
	      {body:"go to the shop",flag:true}
	     	]
  },
  components:{
	 "my-component" : {
		 template : "<div><h3>变红的总数 <span v-show='remaining'>{{ remaining }}</span></h3> <ul><li v-bind:class=\" item.flag ? 'computed' : '' \"  v-for ='(item,index) in props'>{{ item.body }} <button v-on:click='toggle(item)'>变色</button> <button v-on:click='deleteItem(index)' >删除</button></li></ul></div>",
		 props : ['props'],
		  methods:{
			  toggle:function(item){    //这里接收一个对象 这里的对象是指每个message里的 独立变量的{}对象
				 item.flag  = ! item.flag; //改变 取反 对象里flag的值
			  },
			  deleteItem:function(index){ //删除当前实例
				this.props.splice(index,1);
			  }
		  },
		  computed :{
			  remaining:function(){    //过滤器 默认统计所有 过滤后统计对象内flag等于true的 
				  return this.props.filter(function(item){
					  return  item.flag;
				  }).length;
			  } 
		  }
	 }
  },

});
</script>


